import { Image } from '@douyinfe/semi-ui';
import { forwardRef } from 'react';
import deleteIcon from "@/assets/images/imageEdit/delete.svg";
import download from "@/assets/images/imageEdit/download.svg";
import layerEditIcon from "@/assets/images/imageEdit/layer_edit_icon.svg";
import imageIcon from "@/assets/images/imageEdit/image_icon.svg";
import copy from "@/assets/images/imageEdit/copy.svg";
import styles from "./index.module.scss";

const Results = forwardRef(({ 
  resultsItemRefs,
  currentMenuKey,
  currentMenuTitle,
 }, ref) => {
  const resultsData = [
    {
      title: currentMenuTitle,
      quality: "2K",
      ratio: "1:1",
      time: "2025/07/19 14:13",
      content: "3D图标，多种设计，图标顺序依次是：钢厂、基地、厂家、代理、码头，适用于UI，重点是钢厂基地采用工厂类元素，码头是以龙门吊之类的元素，代理商是以人物为主的元素，使用柔和的橡皮泥风格，背景为白色，风格参考Dribbble，高分辨率，以红色为主，黄色为辅，光线柔和。"
    },
    {
      title: currentMenuTitle,
      quality: "2K",
      ratio: "16:9",
      time: "2025/07/19 14:13",
      content: "3D图标，多种设计，图标顺序依次是：钢厂、基地、厂家、代理、码头，适用于UI，重点是钢厂基地采用工厂类元素，码头是以龙门吊之类的元素，代理商是以人物为主的元素，使用柔和的橡皮泥风格，背景为白色，风格参考Dribbble，高分辨率，以红色为主，黄色为辅，光线柔和。"
    }
  ];

  const renderResultsImgItem = () => (
    <div className={styles.resultsImgItem}>
      <div className={styles.maskLayer}>
        <div className={styles.maskTool}>
          <Image className={styles.maskLayerImg} src={deleteIcon} preview={false} draggable={false} />
          <Image className={styles.maskLayerImg} src={download} preview={false} draggable={false} />
        </div>
        <div className={styles.maskEdit}>
          <div className={styles.maskleft}>
            <Image className={styles.maskLayerImg} src={layerEditIcon} preview={false} draggable={false} />
            <div>图层编辑</div>
          </div>
          <div className={styles.maskSeparate}></div>
          <div className={styles.maskRight}>
            <Image className={styles.maskLayerImg} src={imageIcon} preview={false} draggable={false} />
            <div>图像编辑</div>
          </div>
        </div>
      </div>
      <Image className={styles.img} src={''} preview={false} draggable={false} />
    </div>
  );

  return (
    <div className={styles.results} ref={ref}>
      {['text','pic','multi'].includes(currentMenuKey)&&resultsData.map((item, index) => (
        <div key={index} className={styles.resultsItem} ref={el => resultsItemRefs.current[index] = el}>
          <div className={styles.resultsHead}>
            <div className={styles.resultsHeadLeft}>
              <div className={styles.resultsHeadTitle}>{item.title}</div>
              <div className={styles.separate}></div>
              <div className={styles.resultsHeadText}>
                <div className={styles.tabText}>{item.quality}</div>
                <div className={styles.tabText}>{item.ratio}</div>
                {currentMenuKey=='pic'&&<div className={styles.thumbnail}>
                  <Image className={styles.img} src={''} preview={false} draggable={false} />
                  <span>参考图</span>
                </div>}
              </div>
            </div>
            <div className={styles.resultsHeadTime}>{item.time}</div>
          </div>
          <div className={styles.resultsContent}>
            {item.content}
            <Image className={styles.img} src={copy} preview={false} draggable={false} />
          </div>
          <div className={styles.resultsImgList}>
            {Array.from({ length: 4 }, (_, imgIndex) => (
              <div key={imgIndex}>{renderResultsImgItem()}</div>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
});

Results.displayName = 'Results';

export default Results;